<template>
  <view class="bmi-input">
    <view class="input-agx">
        <view class="title">您的性别</view>
        <view class="content">

            <view v-for="(item,index) in agx" :class="defIndex=== index ? 'cilck' : ''" @click="defIndex = index" :key="item">{{item}}</view>
        </view>
    </view>

    <view  class="input-height">
        <view class="title">您的身高</view>
        <view class="content">
            <input v-model="height"   placeholder="请输入身高">
            <text>CM</text>
        </view>
    </view>

    <view class="input-kg">
        <view class="title">您的体重</view>
        <view class="content">
            <input   v-model="kg"  placeholder="请输入体重">
            <text>KG</text>
        </view>
    </view>

  </view>
  <view class="mr-commit" @click="commit" :class="sizeStatus ? 'mr-commit-big' : 'mr-commit-small'" :style="{ 'background-image': 'url(' + EnumBG.BU4 + ')' }">
    观看广告查询</view>
    <LandscapeModel v-model:show="show" :sonFun="sonFun"/>
</template>

<script setup lang="ts">
import {  EnumBG } from "@/utils/content";
import { onlinebmicalculator } from "@/utils/ab";
import { EnumStatus } from "@/utils/constants";
import LandscapeModel from "@/components/Landscape/LandscapeModel.vue";
const emit = defineEmits(['update:defStatus','update:content'])
const sizeStatus = ref(false)
const defIndex = ref(0)
const show = ref(false)
const agx = ref([
    '男','女'
])
const height = ref()
const kg = ref()
const commit = ()=>{
    if(!Number(height.value) && !Number(kg.value)){
        uni.showToast({
        title: "请输入正确的数值",
        duration: 2000,
        icon:"none"
      });
      return
    }
    show.value = true
}
const sonFun = async()=>{
    //  const data = await onlinebmicalculator(height.value,kg.value)
    var h = height.value / 100
    const data = (kg.value / (h * h)).toFixed(2);
    emit('update:defStatus',EnumStatus.RESULT)
    emit('update:content',data)
}
const startTimer = () => {
    setInterval(() => {
        sizeStatus.value =  !sizeStatus.value
    }, 1000); // 每秒执行一次
  };
onMounted(()=>{
      startTimer()
  })
</script>

<style lang="scss" scoped>
 .mr-commit{
      z-index: 102;
      position: absolute;
      top: 78%;
      width: 46%;
      height: 130rpx;
      left: 27%;
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
  }
  .mr-commit-big{
      top: 79%;
      width: 50%;
      height: 150rpx;
      left: 25%;
      transition: all 1s;
  }
  .mr-commit-small{
      top: 78%;;
      width: 46%;
      height: 130rpx;
      left: 27%;
      transition: all 1s;
  }
.bmi-input{
    position: absolute;
    z-index: 102;
    top: 47%;
    width: 80%;
    left: 10%;
    height: 30%;
    color: white;
    view{
        display: flex;
        width: 80%;
        font-size: 33rpx;
        
    }
    .title{
        height: 120rpx;
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    input{
        height: 100%;
        margin-left: 10rpx;
        color: black;
    }
    .content{
        background: white;
        margin: auto;
        height: 113rpx;
        margin-right: 5rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        view{
            width: 110rpx;
            height: 60rpx;
            margin: 0 10rpx;
            color: rgb(243,113,0);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10rpx;
        }
        .cilck{
            background: rgb(243,113,0);
            color: white;
        }
        
    }
    .input-agx{
        margin: 0 10%;
        margin-top: 20rpx;
        background: rgb(243,113,0);
    }
    .input-height{
        margin: 0 10%;
        margin-top: 20rpx;
        background: rgb(7,143,205);
        text{
            margin-right: 10rpx;
            font-size: 40rpx;
            font-weight: bold;
            color: rgb(7,143,205);
        }
    }
    .input-kg{
        margin: 0 10%;
        margin-top: 20rpx;
        background: rgb(0,174,118);
        text{
            margin-right: 10rpx;
            font-size: 40rpx;
            font-weight: bold;
            color: rgb(0,174,118);
        }
    }
}
</style>
